
// 开发环境配置 : 

// - 服务器 
// - 监听 
var gulp = require("gulp");
var connect = require("gulp-connect");
var sass = require("gulp-sass");
sass.compiler = require("sass");
var htmlmin = require("gulp-htmlmin");
var cssmin  = require("gulp-cssmin");
var babel = require("gulp-babel");
var uglify = require("gulp-uglify");
var rev = require("gulp-rev");
var revCollector = require("gulp-rev-collector");
var del = require('del');


// 配置项 :
var options = {
      port : 3000,
      root : "./dist",
      html : {
            src : "./src/**/*.html",
            target : "./dist"
      },
      scss : {
            src : "./src/scss/**/*.scss",
            target : "./dist/css"
      },
      javascripts : {
            src : "./src/javascripts/**/*.js",
            target : "./dist/javascripts",
            libs : "./src/javascripts/libs/**/*.js"
      },
      font : {
            src : "./src/scss/font/**/*",
            target : "./dist/css/font"
      },
      json : {
            src : "./src/**/*.json",
            target :  "./dist"
      },
      php : {
            src : "./src/**/*.php",
            target : "./dist"
      }
};


// 创建一个服务器 : 
gulp.task("connect" , async function(){
      connect.server({
            port : options.port,
            root : options.root,
            livereload : true
      });
});

// 创建三类文件的转存 : 
gulp.task("json-dev" , async function(){
      await gulp.src( options.json.src )
            .pipe(gulp.dest( options.json.target ))
            .pipe(connect.reload());
});

gulp.task("json-build" , async function(){
      await gulp.src( options.json.src )
            .pipe(gulp.dest( options.json.target ))
            .pipe(rev.manifest())
});
gulp.task("php-dev" , async function(){
      await gulp.src( options.php.src )
            .pipe(gulp.dest( options.php.target ))
            .pipe(connect.reload());
});

gulp.task("php-build" , async function(){
      await gulp.src( options.php.src )
            .pipe(gulp.dest( options.php.target ))
            .pipe(rev.manifest())
});

gulp.task("html-dev" , async function(){
      await gulp.src( options.html.src )
            .pipe(gulp.dest( options.html.target ))
            .pipe(connect.reload());
});

gulp.task("html-build" , async function(){
      await gulp.src( [options.html.src , "./rev/**/*.json"] )
            .pipe(revCollector({
                  replaceReved: true,
                  dirReplacements: {
                        'css': 'css',
                        '/javascripts/': 'javascripts/',
                        'cdn/': function(manifest_value) {
                              return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                        }
                  }
            }))
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest( options.html.target ));
});
gulp.task("html-build" , async function(){
      await gulp.src( [options.html.src , "./rev/**/*.php"] )
            .pipe(revCollector({
                  replaceReved: true,
                  dirReplacements: {
                        'css': 'css',
                        '/javascripts/': 'javascripts/',
                        'cdn/': function(manifest_value) {
                              return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
                        }
                  }
            }))
            .pipe(htmlmin({ collapseWhitespace: true }))
            .pipe(gulp.dest( options.html.target ));
});

gulp.task("scss-dev" , async function(){
      await gulp.src( options.scss.src )
            .pipe( sass().on('error', sass.logError))
            .pipe(gulp.dest( options.scss.target ))
            .pipe(connect.reload());
});

gulp.task("scss-build" , async function(){
      await gulp.src( options.scss.src )
            .pipe( sass().on('error', sass.logError))
            .pipe( cssmin())
            .pipe( rev() )
            .pipe(gulp.dest( options.scss.target ))
            .pipe(rev.manifest())
            .pipe(gulp.dest( "./rev/css/" ))
});

gulp.task("javascript-dev" , async function(){
      await gulp.src( [options.javascripts.src , "!"+options.javascripts.libs] )
            .pipe(gulp.dest( options.javascripts.target ))
            .pipe(connect.reload());
});

gulp.task("javascript-build" , async function(){
      await gulp.src([ options.javascripts.src ,  "!"+options.javascripts.libs] )
            .pipe(babel({
                  presets : ["@babel/env"]
            }))
            // 如果打包失败太多 : js失效可以注释掉这个压缩功能
            .pipe(
                  uglify()
            )
            .pipe(rev())
            .pipe(gulp.dest( options.javascripts.target ))
            .pipe(rev.manifest())
            .pipe(gulp.dest( "./rev/javascript/" ))
});

// 创建文件监听 : 

gulp.task("watch", async function(){
      await gulp.watch( options.html.src , gulp.series("html-dev"));
      await gulp.watch( options.scss.src , gulp.series("scss-dev"));
      await gulp.watch( options.javascripts.src , gulp.series("javascript-dev"));
      await gulp.watch( options.javascripts.src , gulp.series("json-dev"));
      await gulp.watch( options.javascripts.src , gulp.series("php-dev"));
});


gulp.task("dev-init" , gulp.series("html-dev","scss-dev" , "javascript-dev"));


// 删除dist之中的所有内容; 
gulp.task("del" , async function(){
      await del.sync("./dist/**/*");
});
// 编写一个指令处理所有的依赖 ; 
gulp.task("libs", async function(){
      await gulp.src(options.font.src)
           .pipe(gulp.dest( options.font.target));

      await gulp.src(options.javascripts.libs)
      .pipe(gulp.dest(options.javascripts.target + "/" + "libs"))
});

// 因为 watch 和 connect 没有办法同时执行，所以我们需要对这两个指令进行合并; 
gulp.task("dev" , gulp.series("dev-init", "libs" , gulp.parallel("watch" , "connect")));
gulp.task("build" , gulp.series( "del" , "libs" , "html-build" , "scss-build" , "javascript-build", "json-build" , "php-build"));